﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="/lib/signalr.js"></script>
</head>
<body>
    <div>
        <div>
            <input type="hidden" id="userId" value="" />
            <p><label>UserName:</label><i id="userName"></i></p>
            <p><label>EMail:</label><i id="email"></i></p>
            <p><label>Avatar:</label><img id="avatar" style="width:48px; height:48px; border-radius:50%; overflow:hidden;" /> </p>
        </div>
        <div style="width:700px;height:500px;border:1px solid red;">
            <ul id="msgList"></ul>
        </div>
        <div>
            <select id="users"></select>
        </div>
        <div>
            <textarea id="msgSendContent" placeholder="请输入发送消息" cols="100" rows="4"></textarea>
            <br />
            <button id="send" type="button">发送</button>
        </div>

    </div>

    <script type="text/javascript">
        $(function () {
            var token = sessionStorage['token'];

            if (!token) {
                alert('请先登录!');
                window.location = 'http://localhost:5001/login.html';
                return;
            }
            function timeFormat(time) {
                time = new Date(time)
                return time.toLocaleDateString() + ' ' + time.toLocaleTimeString();
            }

            var connection = new signalR.HubConnectionBuilder()
                .withUrl("/msg?token=" + token)
                .configureLogging(signalR.LogLevel.Information)
                .build();

            connection.on('Receive', function (msg) {
                var $ul = $('#msgList');
                var $li = $('<li>' + msg.fromUser.userName + '[' + timeFormat(msg.sendTime) + '] : ' + msg.content + '</li>');
                $ul.append($li);
            });

            connection.on('UserInfo', function (userInfo) {
                $('#userName').text(userInfo.userName);
                $('#email').text(userInfo.eMail);
                $('#avatar').attr('src', userInfo.avatar);
                $('#userId').val(userInfo.id);
            });

            connection.on('Refresh', function (users) {
                $('#users').empty();
                users.forEach(function (user) {
                    if (user.id != $('#userId').val())
                        $('#users').append('<option value="' + user.id + '">' + user.userName + '</option>');
                });;
            });

            connection.on('Error', function (err) {
                alert(err);
            });

            connection.start().catch(err => console.error(err.toString()));
            $('#send').click(function () {
                var msg = $('#msgSendContent').val();
                var toUerId = $('#users').val();
                connection.invoke('Send', toUerId, msg).catch(err => console.error(err));
                var $ul = $('#msgList');
                var $li = $('<li>我[' + timeFormat(new Date()) + '] : ' + msg + '</li>');
                $ul.append($li);
            });
        });
    </script>
</body>
</html>